<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            .input {
                margin-top: 100px;
                text-align: center
            }

            .p1 {
                width: 100px;
                text-align: right;

                float: left;
            }

            .table {
                width: 710px;
                margin: auto;
            }

            input[type="text"] {
                width: 150px;
            }

            td {
                text-align: center;
            }

            .d1 {
                margin: auto;
                margin-bottom: 10px;
                width: 290px;
            }
        </style>
        <script>
            function doAdd() {
                //获取文本框的值
                var name = document.querySelector("#name").value;
                var age = document.querySelector("#age").value;
                var email = document.querySelector("#email").value;
                var address = document.querySelector("#address").value;
                var male = document.querySelector("#male");
                var female = document.querySelector("#female");
                //在js中，DOM对象.checked对应的值是布尔值，true表示选中，false表示未选中
                // console.log(male.checked);
                var sex = male.checked ? male.value : female.value;
                var arrs=[name,age,sex,email,address,"<input type='button' value='删除' onclick='doDelete(this)'>"];

                //创建tr的节点
                var tr=document.createElement("tr");

                //循环创建td节点
                for(var i=0;i<6;i++){
                    var td=document.createElement("td");
                    td.innerHTML=arrs[i];
                    tr.appendChild(td);
                }

                // 获取tr的父节点
                var tb=document.querySelector("#tb");

                //父节点追加子节点
                tb.appendChild(tr);
            }

            function doDelete(obj){
                obj.parentNode.parentNode.remove();
            }
        </script>




    </head>
    <body>
        <div class="table">

            <table border="1px" align="center" cellpadding="10px" cellspacing="2px">
                <thead>
                    <tr>
                        <th width="140px">Name</th>
                        <th width="80px">Age</th>
                        <th width="130px">Gender</th>
                        <th width="200px">Email</th>
                        <th width="90px">地址</th>
                        <th width="60px"></th>
                    </tr>
                </thead>
                <tbody id="tb">

                    <tr>
                        <td>mike</td>
                        <td>20</td>
                        <td>男</td>
                        <td>222@qq.com</td>
                        <td>南京</td>
                        <td>
                            <input type="button" style="width: 40px" value="删除" onclick="doDelete(this)" class="del">
                        </td>
                    </tr>
                    <tr>
                        <td>mike2</td>
                        <td>20</td>
                        <td>男</td>
                        <td>222@qq.com</td>
                        <td>上海</td>
                        <td>
                            <input type="button" style="width: 40px" value="删除" onclick="doDelete(this)" class="del">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <form action="">
            <div class="input">
                <p style="font-size: 19px ;text-align: center ;margin-bottom: 20px"> Pls input info</p>
                <div class="d1">
                    <p class="p1">Name: </p>
                    <input type="text" id="name">

                </div>
                <div class="d1">
                    <p class="p1">Age:</p>
                    <input type="text" id="age">

                </div>
                <div class="d1">
                    <p class="p1">Gender:
                    </p>
                    <div style="text-align: center">
                        <input type="radio" name="sex" value="男" id="male" checked> 男
                        <input type="radio" name="sex" value="女" id="female"> 女
                    </div>

                </div>
                <div class="d1">
                    <p class="p1">Email:</p>
                    <input type="text" id="email">

                </div>
                <div class="d1">
                    <p class="p1">Address:
                    </p> <input type="text" id="address">
                </div>
                <div class="d1" style="text-align: center">

                    <input type="button" style="width: 40px" onclick="doAdd()" value="添加">
                    <input type="reset" style="width: 40px;">

                </div>
            </div>
        </form>
    </body>
</html>